<!--   -->
<template>
  <div id="InfoTwo">
    <div class="InfoTwo-block">
      <template v-for="(item, index) in data">
        <div class="InfoTwo-box"
             :key="index">
          <p class="InfoTwo-title">{{item.title}}</p>
          <p class="InfoTwo-time">{{item.create_time}}</p>
          <span @click="click_collect(item.rid)">收藏</span>
          <span><a :href="url+item.rid"
               target="_blank">查看详情>></a></span>
        </div>
      </template>
    </div>

    <!-- 翻页按钮 -->
    <div class="InfoTwo-btn">
      <button @click="next_page(-1)">上一页</button>
      <button @click="next_page(1)">下一页</button>
    </div>
  </div>
</template>

<script>
import util from '../api/utils.js'
import baseUrl from '../api/setBaseUrl.js'

export default {
  name: 'InfoTwo',
  props: ['tabStatus'],
  data () {
    return {
      data: [],
      // 打开网页地址
      url: baseUrl + '/index/newsDetail/id/',
      // 考试资讯
      infoData: [],
      // 考试须知
      noticeData: [],
      // 页数
      pages: 1,
      // 最后一页时的判断
      backStatus: false
    }
  },

  components: {},

  computed: {},
  watch: {
    tabStatus (newValue, oldValue) {
      switch (newValue) {
        case 1:
          // console.log('进入1')
          // this.data = this.infoData
          this.pages = 1
          // this.backStatus = false
          this.info_req(1, this.pages)
          // console.log(this.data)
          break
        case 2:
          // console.log('进入2')
          // this.data = this.noticeData
          this.pages = 1
          // this.backStatus = false
          this.info_req(2, this.pages)
          // console.log(this.data)
          break
      }
    }
  },

  mounted () {
    this.info_req(1, 1)
  },

  methods: {
    // 收藏
    click_collect (id) {
      console.log(id)
      this.$http.getRecord({
        phone: localStorage.getItem('mobile'),
        id: id
      }).then((res) => {
        // console.log(res)
        if (res.data.data === 0) {
          this.$http.newsEdit({
            phone: localStorage.getItem('mobile'),
            id: id,
            status: 1
          }).then((res1) => {
            console.log(res1)
            this.$message({
              message: '收藏成功',
              type: 'success'
            })
          }).catch((err) => {
            console.log(err)
          })
        } else {
          this.$message({
            message: '您已收藏过这篇文章',
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 翻页
    next_page (num) {
      console.log(this.backStatus)
      console.log(num)
      if (this.backStatus) {
        if (num > 0) {
          this.$message({
            message: '已经翻完了',
            type: 'warning'
          })
        } else {
          // this.backStatus = false
          this.pages = this.pages + num
          if (this.pages > 0) {
            this.info_req(this.tabStatus, this.pages)
          } else {
            this.$message({
              message: '已经翻到顶部',
              type: 'warning'
            })
          }
        }
      } else {
        this.pages = this.pages + num
        console.log('this.pages=', this.pages)
        if (this.pages > 0) {
          this.info_req(this.tabStatus, this.pages)
        } else {
          this.$message({
            message: '已经翻到顶部',
            type: 'warning'
          })
        }
        // this.req_data(this.pages)
      }
    },
    // 请求数据
    info_req (id, page) {
      // 资讯
      // if (page > 0) {
      this.$http.news({
        id: id,
        listRows: 17,
        page: page
      }).then((res) => {
        console.log(res)
        for (let item of res.data.data.data) {
          item.create_time = util.formatDate(item.create_time * 1000)
        }
        this.data = res.data.data.data
        if (res.data.data.data.length < 17) {
          this.backStatus = true
        }
        // this.infoData = res.data.data.data
      }).catch((err) => {
        console.log(err)
      })
      // } else {
      //   // this.pages = 1
      //   this.$message({
      //     message: '已经翻到顶部',
      //     type: 'warning'
      //   })
      // }
    }
  }
}

</script>
<style lang='less' scoped>
#InfoTwo {
  padding: 20px 54px;
  height: calc(100% - 40px);
  background: white;
  .InfoTwo-block {
    height: calc(100% - 75px);
    .InfoTwo-box {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;
      p {
        display: inline-block;
        color: #333;
      }
      span {
        display: inline-block;
        width: 15%;
        color: #1073d0;
        cursor: pointer;
        a {
          color: #1073d0;
          text-decoration: none;
        }
      }
      .InfoTwo-title {
        width: 40%;
        text-align: left;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
      .InfoTwo-time {
        width: 30%;
      }
    }
  }

  .InfoTwo-btn {
    border-top: 1px solid #d9d9d9;
    height: 75px;
    text-align: right;
    line-height: 80px;
    button {
      background: rgba(238, 238, 238, 1);
      border-radius: 10px;
      border: none;
      padding: 8px 20px;
      color: #333;
      margin-left: 40px;
      line-height: 20px;
    }
    button:hover {
      background: rgb(165, 165, 165);
      color: white;
    }
  }
}
</style>
